import { computed, defineComponent } from 'vue';
// import styles from './index.module.scss';
import './index.scss';
import { useI18n } from 'vue-i18n';

export default defineComponent({
  name: 'EnumColumn',
  props: {
    cellParam: Object,
    record: Object,
    column: Object,
    rowIndex: Number,
    isDev: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  emits: ['columnLinkFormat'],
  setup(props, { attrs, emit, expose, slots }) {
    const { t } = useI18n({ useScope: 'global' });
    const onHandlerClick = () => {
      emit('columnLinkFormat');
    };
    return () => {
      const { column, record } = props;
      const colConf = column;
      const enumDisp = colConf?.enumDisp;
      const enumRanges = enumDisp?.enumRanges || [];
      if (!props.isDev) {
        enumRanges.forEach(item => {
          if (item.ValueInfo_text) {
            item.text = t(item.ValueInfo_text, item.text);
          }
        });
      }

      const defConfByVal =
        enumRanges.find(item => {
          return item.val == '';
        }) || {};

      // const cellValue = record[colConf.dataField];
      const cellValue = computed(() => props.cellParam?.value);
      const confByVal = computed(() => {
        return (
          enumRanges.find(item => {
            return item.val === `${cellValue.value}`;
          }) || defConfByVal
        );
      });

      const format = () => {
        const returnValue = enumDisp.valMapping
          ? confByVal.value?.text || cellValue.value
          : cellValue.value;

        let displayVal = returnValue;

        if (
          '' === cellValue.value ||
          null === cellValue.value ||
          undefined === cellValue.value
        ) {
          return '';
        }

        try {
          const numberVal = 1 * returnValue;
          if (
            returnValue != null &&
            returnValue != undefined &&
            false === isNaN(numberVal) &&
            typeof numberVal === 'number'
          ) {
            // displayVal = Funcs.NumberToString(numberVal)
            // displayVal = fasNumeral(numberVal, '0.[000000000]');
            displayVal = numberVal;
          }
        } catch (error) {
          console.error('enumCol.vue', error);
        }

        return displayVal;
      };

      return (
        <span
          class={'enumColumn'}
          style={{
            textAlign: colConf.alignment || enumDisp.textAlign || 'center',
          }}
        >
          <span
            onClick={onHandlerClick}
            class={'fasEnumcol'}
            style={{
              textAlign: colConf.alignment || enumDisp.textAlign || 'center',
              padding:
                enumDisp.showMode == 'bgcolor' ||
                enumDisp.showMode == 'icon_bgcolor'
                  ? '2px 4px'
                  : '2px 0px',
              minWidth:
                enumDisp.showMode == 'bgcolor' ||
                enumDisp.showMode == 'icon_bgcolor'
                  ? '50px'
                  : 'initial',
              background:
                enumDisp.showMode == 'bgcolor' ||
                enumDisp.showMode == 'icon_bgcolor'
                  ? confByVal.value?.bgColor
                  : 'inherit',
              color: confByVal.value?.color,
            }}
          >
            {confByVal.value?.icon &&
              (enumDisp.showMode == 'icon' ||
                enumDisp.showMode == 'icon_bgcolor' ||
                enumDisp.showMode == 'icon_only') && (
                <i
                  class={['fasEnumcolIcon', confByVal.value?.icon]}
                  style={{ color: confByVal.value?.iconColor }}
                ></i>
              )}
            <span>{enumDisp.showMode == 'icon_only' ? '' : format()}</span>
          </span>
        </span>
      );
    };
  },
});
